<template>
  <div class="project-list">
    <div class="search-bar">
      <span class="search-title">模版名称</span>
      <a-input
        v-model="searchParams.projectName"
        placeholder="请输入名称查询"
        style="width: 196px; margin-left: 24px"
        @keydown.enter="getList"
      ></a-input>
      <a-button
        type="primary"
        style="float: right"
        @click="createDialogVisible = true"
        >创建项目模版</a-button
      >
    </div>
    <div class="content">
      <a-table
        :data="projectList"
        stripe
        :scroll="{ x: '100%', y: '100%' }"
        :pagination="pageConfig"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
      >
        <template #columns>
          <a-table-column title="序号">
            <template #cell="{ rowIndex }">
              {{
                (pageConfig.pageSize ? pageConfig.pageSize : 10) *
                  ((pageConfig.current ? pageConfig.current : 1) - 1) +
                (rowIndex + 1)
              }}
            </template>
          </a-table-column>
          <a-table-column title="模版名称">
            <template #cell="{ record }">
              <span
                style="color: blue; cursor: pointer"
                @click="clickRow(record)"
                >{{ record.name }}</span
              >
            </template>
          </a-table-column>
          <a-table-column title="项目类型" data-index="type"></a-table-column>
          <a-table-column title="项目编码" data-index="code"></a-table-column>
          <a-table-column
            title="创建时间"
            data-index="createTime"
          ></a-table-column>
          <a-table-column title="创建人" data-index="createBy"></a-table-column>
        </template>
      </a-table>
    </div>
    <div class="components">
      <CreateTemplate
        v-model:visible="createDialogVisible"
        @submit="createSuccess"
      ></CreateTemplate>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, reactive, ref } from 'vue';
  import { PaginationProps } from '@arco-design/web-vue';
  import { useRouter } from 'vue-router';
  import { useGlobalModeStore } from '@/store';
  import { getProjectList, ProjectListParams } from '@/api/project';
  import CreateTemplate from './create-template.vue';

  const router = useRouter();
  const globalModeStore = useGlobalModeStore();
  const globalMode = computed(() => {
    return globalModeStore.getGlobalMode;
  });

  const searchParams = reactive({
    projectName: '',
  });

  const projectList = ref<object[]>([
    {
      id: 12,
      name: '测试模版',
      code: 111,
      type: '隧道',
      createTime: '2023-05-06',
      creator: 'chenming',
    },
  ]);
  const pageConfig: PaginationProps = reactive({
    showTotal: true,
    showMore: true,
    showJumper: true,
    showPageSize: true,
    current: 1,
    pageSize: 10,
    total: 100,
  });

  const getList = () => {
    const params: ProjectListParams = {
      pageNo: pageConfig.current || 1,
      pageSize: pageConfig.pageSize || 10,
      projectType: 1,
      name: searchParams.projectName || '',
    };
    getProjectList(params).then((res: any) => {
      if (res.code === 8000000) {
        projectList.value = res.data?.list || [];
        pageConfig.total = res.data?.total || projectList.value.length || 10;
      }
    });
  };
  const clickRow = (row: any) => {
    const mode: string = globalMode.value;
    const path = `project/${row.id}/${mode === 'file' ? 'files' : 'design'}`;
    router.push({
      path,
      // name: 'project',
      // params: {
      //   projectId: row.id,
      // },
    });
  };
  const createSuccess = (state: boolean) => {
    if (state) {
      getList();
    }
  };
  const pageSizeChange = (size: number): void => {
    pageConfig.pageSize = size;
    getList();
  };
  const pageChange = (current: number): void => {
    pageConfig.current = current;
    getList();
  };

  const createDialogVisible = ref(false);

  onMounted(() => {
    getList();
  });
</script>

<style scoped lang="less">
  .project-list {
    height: calc(100vh - 200px);
    //border: 1px solid red;
  }
  .search-title {
    display: inline-block;
    width: 60px;
    height: 22px;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN, serif;
    font-weight: 600;
    color: #000000;
    line-height: 22px;
  }
  .search-bar {
    margin-top: 8px;
  }
  .content {
    margin-top: 24px;
    height: calc(100% - 60px);
  }
</style>
